<template>
  <div class="article-ranking-container">
    <el-card class="header">
      <div class="dynamic-box">
        <span class="title">{{ $t('msg.article.dynamicTitle') }}</span>
        <el-checkbox-group v-model="selectDynamicLabel">
          <el-checkbox
            v-for="item in dynamicData"
            :key="item.label"
            :label="item.label"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </el-card>
    <el-card>
      <el-table ref="tableRef" :data="tableData" border>
        <el-table-column
          v-for="item in tableColumns"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <template v-if="item.prop === 'publicDate'" #default="{ row }">
            {{ $filters.relativeTime(row.publicDate) }}
          </template>
          <template
            v-else-if="item.prop === 'action'"
            #default="{ row, index }"
          >
            <el-button type="primary" size="small" @click="onShowClick(row)">{{
              $t('msg.article.show')
            }}</el-button>
            <el-button
              type="danger"
              size="small"
              @click="onRemoveClick(row, index)"
              >{{ $t('msg.article.remove') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 50, 100, 200]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="totals"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onActivated, onMounted } from 'vue'
import { getArticleList } from '@/api/article'
import { watchSwitchLang } from '@/utils/i18n'
import { selectDynamicLabel, dynamicData, tableColumns } from './dynamic'
import { tableRef, initSortable } from './sortable'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

// 列表数据
const tableData = ref([])
const totals = ref(0)
const page = ref(1)
const pageSize = ref(10)

// 获取文章列表
const getArticle = async () => {
  const { list, total } = await getArticleList({
    page: page.value,
    size: pageSize.value
  })

  tableData.value = list
  totals.value = total
}
getArticle()
watchSwitchLang(getArticle)
onActivated(getArticle)

const i18n = useI18n()
const router = useRouter()
// 点击查看
const onShowClick = (row) => {
  router.push(`/article/${row._id}`)
}
// 删除
const onRemoveClick = (row, index) => {
  ElMessageBox.confirm(
    i18n.t(
      'msg.article.dialogTitle1') +
        row.title +
        i18n.t('msg.article.dialogTitle2')
    ,
    { type: 'warning' }
  ).then(() => {
    // 调用接口删除选中数据
    tableData.value.splice(index, 1)
    ElMessage.success(i18n.t('msg.article.removeSuccess'))
    // 重新渲染数据
    getArticle()
  })
}

const handleSizeChange = (currentSize) => {
  pageSize.value = currentSize
  getArticle()
}
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  getArticle()
}

// 拖拽
onMounted(() => {
  initSortable(tableData, getArticle)
})
</script>

<style lang="scss" scoped>
.article-ranking-container {
  .header {
    margin-bottom: 20px;
    .dynamic-box {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
  :deep .el-table__row {
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    text-align: center;
  }
}
:deep .sortable-ghost {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
</style>
